<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Plugins</title>
<link rel="stylesheet" type="text/css" media="screen" href="jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="tabs.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../jquery.tooltip.css" />
<script type="text/javascript" src="jquery-1.1.2.js"></script>
<script type="text/javascript" src="jquery.tabs.js"></script>
<script type="text/javascript" src="jquery.history.pack.js"></script>
<script type="text/javascript" src="../jquery.dimensions.js"></script>
<script type="text/javascript" src="../jquery.tooltip.js"></script>
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript" src="chili-1.7.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<h1 id="banner">jQuery Tooltip Plugin</h1>
<div id="main">
    <ul id="nav" class="anchors">
	    <li><a href="#getting-started">Getting Started</a></li>
	    <li><a href="#api">API</a></li>
	    <li><a href="#code-samples">Code Samples</a></li>
	    <li><a href="#fields">Working With Fields</a></li>
	    <li><a href="#faq">FAQ</a></li>
	    <li><a href="#download">Download &amp; Support</a></li>
    </ul>
    <div id="getting-started" class="tabContent">
    	<div id=getting-started-main">
			<ul id="getting-started-nav" class="sampleAnchors">
				<li><a href="#overview">Overview</a></li>
				<li><a href="#quickstart">Quick Start Guide</a></li>
			</ul>
			<div id="overview" class="sampleTabContent">
		        <p>The jQuery Tooltip Plugin allows you to easily and unobtrusively upgrade tooltips on your page
		        with stylesheets and behaviour. The title-attribute of any element is used to display an overlay
		        above the element. The default behaviour mimicks the default behaviour of the browser:<br/>
		        A short delay before showing the tooltip and no mouse tracking. That behaviour along with different
		        formatting options can be customized.</p>
		        
		        <p>The plugin provides a single plugin-method, <code class="inline">Tooltip</code>. You can call it
		        without any options for the default behaviour, or pass a JavaScript to customize behaviour and formatting.</p>
		    </div>
	        
	        <div id="quickstart" class="sampleTabContent">
				<div class="step-one">Add one or more elements with a title
				attribute to your page. Lets start with some anchors in a navigation
				list:</div>
				
				<pre><code class="mix">&lt;ul id="navigation"&gt;
			&lt;li&gt;&lt;a href="?overview" title="Here we present our products"&gt;Overview&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="?catalog" title="Browse through all our products"&gt;Catalog&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="?contact" title="Contact us via mail or phone"&gt;Contact&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;</code></pre>
		
		        <div class="step-two">Add a bit CSS and include jQuery and the Tooltip Plugin as external script files and a short script to
		        initialize the tooltips when the <abbr title="Document Object Model">DOM</abbr> is ready:</div>
		        <pre><code class="mix">&lt;head&gt;
		    &lt;style type="text/css"&gt;
		    	#tooltip {
					position: absolute;
					z-index: 3000;
					border: 1px solid #111;
					background-color: #eee;
					opacity: 0.85;
					padding: 5px;
				}
				#tooltip h3, #tooltip div { margin: 0; }
		    &lt;/style&gt;
		    &lt;script type="text/javascript" src="path/to/jquery.js"&gt;&lt;/script&gt;
		    &lt;script type="text/javascript" src="path/to/jquery.tooltip.js"&gt;&lt;/script&gt;
		
		    &lt;script type="text/javascript"&gt;
		        // wait for the DOM to be loaded
		        $(document).ready(function() {
		            // find all anchors inside 'navigation' and apply Tooltips
		            $('#navigation a').Tooltip();
		        });
		    &lt;/script&gt;
		&lt;/head&gt;</code></pre>
		
			    <strong>That's it!</strong> When hovering one of the anchors in the list, a nicely formatted tooltip is displayed:
			    
			    <ul id="navigation">
					<li><a href="?overview" title="Here we present our products">Overview</a></li>
					<li><a href="?catalog" title="Browse through all our products">Catalog</a></li>
					<li><a href="?contact" title="Contact us via mail or phone">Contact</a></li>
				</ul>
			</div>
		</div>
    </div>
    
    <div id="api" class="tabContent">
    	<ul id="docs"><li class="method"><span class="fn">Tooltip( <span class="arg-type tooltip" title="A simple Javascript object..">Object</span> <span class="arg-name tooltip" title="(optional) Customize your Tooltips">settings</span> ) returns <span class="type"><span class="tooltip" title="A jQuery object.">jQuery</span></span></span><div class="more"><div class="desc">Display a customized tooltip instead of the default one
for every selected element. The tooltip behaviour mimics
the default one, but lets you style the tooltip and
specify the delay before displaying it.<br/><br/>In addition, it displays the href value, if it is available.<br/><br/>To style the tooltip, use these selectors in your stylesheet:<br/><br/>#tooltip - The tooltip container<br/><br/>#tooltip h3 - The tooltip title<br/><br/>#tooltip div.body - The tooltip body, shown when using showBody<br/><br/>#tooltip div.url - The tooltip url, shown when using showURL<br/><br/>When used on a page with select elements, include the bgiframe plugin. It is used if present.</div><h3>Options</h3><ul class="options"><li>delay (<span class="arg-type tooltip" title="A valid numeric.">Number</span>): The number of milliseconds before a tooltip is display, default is 250</li><li>track (<span class="arg-type tooltip" title="true or false.">Boolean</span>): If true, let the tooltip track the mousemovement, default is false</li><li>showURL (<span class="arg-type tooltip" title="true or false.">Boolean</span>): If true, shows the href or src attribute within p.url, default is true</li><li>showBody (<span class="arg-type tooltip" title="A string of characters.">String</span>): If specified, uses the String to split the title, displaying the first part in the h3 tag, all following in the p.body tag, separated with &lt;br/&gt;s, default is null</li><li>extraClass (<span class="arg-type tooltip" title="A string of characters.">String</span>): If specified, adds the class to the tooltip helper, default is null</li><li>fixPNG (<span class="arg-type tooltip" title="true or false.">Boolean</span>): If true, fixes transparent PNGs in IE, default is false</li><li>bodyHandler (<span class="arg-type tooltip" title="A reference to a Javascript function.">Function</span>): If specified its called to format the tooltip-body, hiding the title-part</li></ul><div class="example"><h3>Example:</h3><p>Shows tooltips for anchors, inputs and images, if they have a title</p><pre><code class="mix">$('a, input, img').Tooltip();</code></pre></div><div class="example"><h3>Example:</h3><p>Shows tooltips for labels with no delay, tracking mousemovement, displaying the tooltip when the label is clicked.</p><pre><code class="mix">$('label').Tooltip({
  delay: 0,
  track: true,
  event: "click"
});</code></pre></div><div class="example"><h3>Example:</h3><p>This example starts with modifying the global settings, applying them to all following Tooltips; Afterwards, Tooltips for anchors with class pretty are created with an extra class for the Tooltip: "fancy" for anchors, "fancy-img" for images</p><pre><code class="mix">// modify global settings
$.extend($.fn.Tooltip.defaults, {
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
 fixPNG: true
});
// setup fancy tooltips
$('a.pretty').Tooltip({
	 extraClass: "fancy"
});
 $('img.pretty').Tooltip({
	 extraClass: "fancy-img",
});</code></pre></div></div></li><li class="method"><span class="fn">$.Tooltip.blocked returns <span class="type"><span class="tooltip" title="true or false.">Boolean</span></span></span><div class="more"><div class="desc">A global flag to disable all tooltips.</div><div class="example"><h3>Example:</h3><pre><code class="mix">$("button.openModal").click(function() {
  $.Tooltip.blocked = true;
  // do some other stuff, eg. showing a modal dialog
  $.Tooltip.blocked = false;
});</code></pre></div></div></li><li class="method"><span class="fn">$.Tooltip.defaults returns <span class="type"><span class="tooltip" title="A Javascript object that contains key/value pairs in the form of properties and values.">Map</span></span></span><div class="more"><div class="desc">Global defaults for tooltips. Apply to all calls to the Tooltip plugin after modifying  the defaults.</div><div class="example"><h3>Example:</h3><pre><code class="mix">$.extend($.Tooltip.defaults, {
  track: true,
  delay: 0
});</code></pre></div></div></li></ul>
    </div>
    
	<div id="code-samples" class="tabContent">
		<div id="samples">
			<ul class="sampleAnchors">
				<li><a href="#sample1">Basics</a></li>
				<li><a href="#sample2">Formatting</a></li>
				<li><a href="#sample3">Fancy Styling</a></li>
			</ul>
			<div id="sample1" class="sampleTabContent">
			
		   		<h2>Default</h2>
		   		This is closest to the default behaviour of a browser tooltip.
		    	<div id="simple" class="example">
		    		<a title="woohoo" href="?out">Hover me</a>
		    	</div>
		    	<script type="text/javascript" class="example">
				$(function() {
					$("#simple a").Tooltip();
				});
				</script>
				
		   		<h2>No delay</h2>
		    	<div id="instant" class="example">
		    		<a title="woohoo" href="?out">Hover me</a>
		    	</div>
		    	<script type="text/javascript" class="example">
					$(function() {
$("#instant a").Tooltip({
	delay: 0
});
				});
				</script>
				
		   		<h2>Tracking with and without delay</h2>
		    	<div id="instanttrack" class="example">
		    		<a title="With default delay" href="?out">Hover me</a>
<br/>
<a title="No delay, see?" href="?out">Hover me</a>
		    	</div>
		    	<script type="text/javascript" class="example">
					$(function() {
$("#instanttrack a:first").Tooltip({
	track: true
});
$("#instanttrack a:last").Tooltip({
	delay: 0,
	track: true
});
				});
				</script>
				
		    </div>
		    <div id="sample2" class="sampleTabContent">
		    	Formatting: bodyHandler, showURL/Body
		    </div>
		    <div id="sample3" class="sampleTabContent">
		    	extraClass, fixpng
		    </div>
	    </div>
    </div>
    
</div>
</body>
</html>
